import { h, Component } from 'preact';
import classNames from 'classnames';
import s from './InvitedRank.scss';
import defaultImg from '../../assets/defaultImg.png';
import { getRecommendTopListAction } from '~/actions/user';
import MessageBox from '~/components/Message';
import { connect } from 'preact-redux';
class InvitedRank extends Component {
	constructor() {
		super();
		this.state = {
			list: []
		};
	}
	componentWillMount(){
		const { dispatch } = this.props;
		dispatch(getRecommendTopListAction()).catch(err => {
			MessageBox.show({title: err.errorMsg || '系统错误'});
		});
	}
	render() {
		const { recommendTopList } = this.props;

		return (
			<div className={s.table}>
				<div className={s.header}>
					<span>
						排名
					</span>
					<span>
						推荐人
					</span>
					<span>
						累计邀请
					</span>
					<span>
						本月邀请
					</span>
				</div>
				<div className={s.body}>
					<ul>
						{recommendTopList.map((item, index)=> (<li>
							<span className={s.no}>
								{index + 1}
							</span>
							<span className={s.name}>
								<img src={item.userImg || defaultImg} className={s.headImg}/>
								{item.userName || '-'}
							</span>
							<span className={s.date}>
								{item.recommendTotal || '-'}
							</span>
							<span className={s.score}>
								{item.monthRecommendTotal || '-'}
							</span>

						</li>))}
					</ul>
				</div>
				<div className={s.footer}></div>
			</div>
		);
	}
}

export default connect(state =>(state))(InvitedRank);
